<template>
  <div class="rycz">
    <el-row>
      <div class="toubu">
        <p>人员抽组</p>
        <div class="rw">
          <el-steps :active="1" align-center>
            <el-step title="抽选人员"></el-step>
            <el-step title="选择维修任务"></el-step>
            <el-step title="抽组成功"></el-step>
          </el-steps>
        </div>
      </div>
    </el-row>
    <el-row class="yixuan">
      <div>
        <i class="el-icon-check">已选人员</i>
        <el-button type="primary" class="xiayibu">下一步</el-button>
      </div>
       
      <div class="biaoqian">
        <el-tag
          :key="tag"
          v-for="tag in dynamicTags"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          {{ tag }}
        </el-tag>
      </div>
    </el-row>
    <el-row class="liebiao">
      <div><i class="el-icon-user-solid">人员列表</i>
        <el-input
    placeholder="人员名字"
    prefix-icon="el-icon-search" class="sousuok">
     </el-input>
       </div>
      <div class="xuanxiang">
       <div >
      <span>部门</span>
      <el-radio-group v-model="radio1" >
      <el-radio-button label="全部"></el-radio-button>
      <el-radio-button label="维修一部"></el-radio-button>
      <el-radio-button label="维修二部"></el-radio-button>
      <el-radio-button label="维修三部"></el-radio-button>
     </el-radio-group>
        </div>
        <div style="margin-top: 20px">
      <span>工种</span>
      <el-radio-group v-model="radio1" >
      <el-radio-button label="全部"></el-radio-button>
      <el-radio-button label="机修"></el-radio-button>
      <el-radio-button label="电工"></el-radio-button>
     </el-radio-group>
        </div>
        <div style="margin-top: 20px">
      <span>等级</span>
      <el-radio-group v-model="radio1">
      <el-radio-button label="全部"></el-radio-button>
      <el-radio-button label="一级"></el-radio-button>
      <el-radio-button label="二级"></el-radio-button>
      <el-radio-button label="三级"></el-radio-button>
     </el-radio-group>
        </div>
    </div>
  </el-row>
  </div>
</template>

<style lang="less" scoped>
// .toubu{
// //     // margin-top: 20px;
// //     padding-top: 20px;
// //     margin-bottom: 20px;
// // }
.rycz{
  height: 100%;
}
.toubu {
  width: 100%;
  height: 172px;
  background-color: rgb(255, 255, 255);
  border: none;
  border-radius: 12px;
  box-shadow: none;
  position: relative;
  margin-bottom: 50px;
}
.toubu p {
  font-family: "Arial Negreta", "Arial Normal", Arial;
  font-weight: 700;
  font-style: normal;
  font-size: 24px;
  color: rgb(52, 69, 99);
  position: absolute;
  left: 30px;
  top: 50px;
}
.rw {
  position: absolute;
  left: calc(50% - 500px);
  top: 150px;
  width: 90%;
}
.yixuan{
  width: 90%;
  font-family: "Arial Narrow Bold", "Arial Narrow", "Arial";
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  color: #344563;
  margin-top: 30px;
  margin-left: 30px;
  height: 130px;
}
.liebiao{
   width: 90%;
  font-family: "Arial Narrow Bold", "Arial Narrow", "Arial";
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  color: #344563;
  margin-top: 30px;
  margin-left: 30px;
  height: 100px;
}
.xiayibu {
  width: 95px;
  height: 36px;
  margin-left: 20px;
}
.biaoqian {
  margin-top: 30px;
  display: flex;
}
.xuanxiang{
  margin-top: 30px;
  display:flex;
  flex-direction: column;
}
.xuanxiang>div>span{
  margin-right: 30px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}
.sousuok{
    width: 200px;
  height: 36px;
  margin-left: 20px;
  margin-top: -10px;
}
</style>

<script>
export default {
  data() {
    return {
      dynamicTags: [
        '张三'
        , "标签二", "标签三"],
      inputVisible: false,
      inputValue: "",
        radio1: '上海',
    };
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
  },
};
</script>